<template>
  <el-dialog
      title="管理员设置"
      :visible="visible"
      width="1000px"
      :destroy-on-close="true"
      :lock-scroll="false"
      @update:visible="updateVisible" style="max-height: calc(100vh - 385px)">
    <div style="display: flex; justify-content: space-between">
      <el-cascader-panel v-model="selection" v-loading="loading" :options="options" :props="props" style="width: 75%"></el-cascader-panel>
      <div style="width: 25%; padding: 4px; border: solid 1px var(--border-color-light); border-radius: 4px; margin-left: 4px">
        <div style="font-weight: bold">已选人员({{selectionLabel.length}})</div>
        <div v-for="(item, key) in selectionLabel" :key="key" style="display: flex; justify-content: space-between">
          <div><i :class="item.role === 'teacher' ? 'el-icon-s-custom' : 'el-icon-user-solid'"></i>{{ item.label }}</div>
          <i class="el-icon-close" @click="delSelection(item.i)"></i>
        </div>
      </div>
    </div>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" @click="save" :loading="saveing">保存 </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    data: Object
  },
  data() {
    return {
      selection: [],
      selectionLabel: [],
      loading: false,
      saveing: false,
      props: {
        filterable: true,
        multiple: true
      },
      options: []
    }
  },
  mounted() {
    this.getManage()
  },
  watch: {
    selection(val) {
      const findOption = function (option, val) {
        const value = JSON.parse(JSON.stringify(val))
        for (let optionVal of option) {
          if (optionVal['value'] === value[0]) {
            if (typeof optionVal['children'] == 'undefined') {
              return optionVal['label']
            } else {
              value.shift()
              return findOption(optionVal['children'], value)
            }
          }
        }
        return null
      };
      this.selectionLabel = []
      for (let i in val) {
        const label = findOption(this.options, val[i])
        if (label) {
          this.selectionLabel.push({i: i, label: label, role: val[i][0]})
        }
      }
    }
  },
  methods: {
    getManage() {
      this.loading = true
      this.$http.post('/equip_manage/get', {equip: this.data.id}).then(res => {
        if (res.data.code === 0) {
          this.options = res.data.data.tree
          this.selection = res.data.data.manage
        } else {
          this.$message.error(res.data.msg)
        }
        this.loading = false
      }).catch(e => {
        this.loading = false
        this.$message.error(e.message)
      })
    },
    delSelection(i) {
      const selection = JSON.parse(JSON.stringify(this.selection))
      selection.splice(i, 1)
      this.$set(this, 'selection', selection)
    },
    save() {
      const saveData = {equip: this.data.id, manage: []}
      for (let item of this.selection) {
        saveData.manage.push({type: item[0], id: item[item.length - 1]})
      }
      this.saveing = true
      this.$http.post('/equip_manage/save', saveData).then(res => {
        this.saveing = false
        if (res.data.code === 0) {
          this.$message.success('保存成功')
          this.updateVisible(false)
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(e => {
        this.saveing = false
        this.$message.error(e.message)
      })
    },
    updateVisible(value) {
      this.$emit('update:visible', value)
    }
  }
}
</script>